import React, { useState } from 'react';
import NoUiSlider from '../../components/NoUiSlider';
import '../common.css';
import './styles.css';

const SoftLimitSlider = () => {
  const [values, setValues] = useState([20, 80]);
  const [warnings, setWarnings] = useState([false, false]);
  const [bounceValues, setBounceValues] = useState([20, 80]);

  const handleChange = (values) => {
    const newValues = values.map(Number);
    setValues(newValues);
    
    // 检查是否超出软限制范围
    const newWarnings = newValues.map(value => {
      return value < 10 || value > 90;
    });
    setWarnings(newWarnings);
  };

  const handleBounceChange = (values, handle) => {
    const newValues = values.map(Number);
    const value = newValues[handle];
    
    // 检查是否超出软限制范围
    if (value < 10) {
      // 如果超出范围，设置一个在范围内的新值
      const updatedValues = [...newValues];
      updatedValues[handle] = 10;
      setBounceValues(updatedValues);
    } else if (value > 90) {
      // 如果超出范围，设置一个在范围内的新值
      const updatedValues = [...newValues];
      updatedValues[handle] = 90;
      setBounceValues(updatedValues);
    } else {
      setBounceValues(newValues);
    }
  };

  return (
    <div className="soft-limit-slider-container">
      <h2>软限制示例</h2>
      
      {/* 警告式软限制 */}
      <div className="slider-section">
        <h3>警告式软限制</h3>
        <div className="slider-wrapper">
          <div className="slider-container">
            <NoUiSlider
              start={values}
              connect={true}
              range={{
                'min': 0,
                'max': 100
              }}
              tooltips={[true, true]}
              onChange={handleChange}
            />
          </div>
          <div className="value-display">
            <div className={`value ${warnings[0] ? 'warning' : ''}`}>
              最小值: {values[0]}
              {warnings[0] && <span className="warning-text">超出软限制范围 (10-90)</span>}
            </div>
            <div className={`value ${warnings[1] ? 'warning' : ''}`}>
              最大值: {values[1]}
              {warnings[1] && <span className="warning-text">超出软限制范围 (10-90)</span>}
            </div>
          </div>
        </div>
        <div className="description">
          <p>警告式软限制：</p>
          <ul>
            <li>范围从 0 到 100</li>
            <li>软限制范围：10-90</li>
            <li>特点：
              <ul>
                <li>滑块可以移动到软限制范围之外</li>
                <li>超出软限制范围时会显示警告</li>
                <li>软限制范围用虚线标记</li>
              </ul>
            </li>
          </ul>
        </div>
      </div>

      {/* 自动弹回式软限制 */}
      <div className="slider-section">
        <h3>自动弹回式软限制</h3>
        <div className="slider-wrapper">
          <div className="slider-container">
            <NoUiSlider
              start={bounceValues}
              connect={true}
              range={{
                'min': 0,
                'max': 100
              }}
              tooltips={[true, true]}
              onChange={handleBounceChange}
            />
          </div>
          <div className="value-display">
            <div className="value">
              最小值: {bounceValues[0]}
            </div>
            <div className="value">
              最大值: {bounceValues[1]}
            </div>
          </div>
        </div>
        <div className="description">
          <p>自动弹回式软限制：</p>
          <ul>
            <li>范围从 0 到 100</li>
            <li>软限制范围：10-90</li>
            <li>特点：
              <ul>
                <li>滑块超出软限制范围时会自动弹回</li>
                <li>最小值不会低于 10</li>
                <li>最大值不会高于 90</li>
                <li>软限制范围用虚线标记</li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
};

export default SoftLimitSlider; 